<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册登入</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="hero">
        <div class="form-box">
            <div class="button-box">
                <div id="btn"></div>
                <button type="button" class="toggle-btn" onclick="login()">登入</button>
                <button type="button" class="toggle-btn" onclick="register()">注册</button>
            </div>
            <div class="social-icons">
                <img src="img/2.png">
                <img src="img/3.png">
                <img src="img/1.png">

            </div>
            <form id="login" class="input-group">
                <input type="text" class="input-field" placeholder="用户名" required>
                <input type="text" class="input-field" placeholder="密码" required>
                <input type="checkbox" class="chech-box"><span><em>记住密码</em></span>
                <button type="submit" class="submit-btn">登入</button>
            </form>
            <form id="register" class="input-group">
                <input type="text" class="input-field" placeholder="用户名" required>
                <input type="email" class="input-field" placeholder="邮箱" required>
                <input type="text" class="input-field" placeholder="密码" required>
                <input type="checkbox" class="chech-box"><span><em>我同意</em></span>
                <button type="submit" class="submit-btn">注册</button>
            </form>
        </div>
    </div>
    <script>
        var x = document.getElementById("login");
        var y = document.getElementById("register");
        var z = document.getElementById("btn");

        function register() {
            x.style.left = "-400px";
            y.style.left = "50px";
            z.style.left = "110px";
        }

        function login() {
            x.style.left = "50px";
            y.style.left = "450px";
            z.style.left = "0s";
        }
    </script>
</body>

</html>